@charset "utf-8";
@import "reset";
@import "common";
@import "icon";

$hover_color:#1428a0;
$main_w:1231px;
$border_choose:2px solid #29a9df;

@mixin clickcss{
    color: $hover_color;
    font-weight: bold;
    border-bottom: 3px solid $hover_color;
}



.shop_top{
    width: $main_w;
    margin: auto;
    padding: 0 30px;
    p{
        font-size: 14px;
        color:$hover_color;
        line-height: 70px;
        a{
            font-size: 14px;
            color: black;
            line-height: 70px;
            &:hover{
                color: $hover_color;
            }
        }
    }
}
.buy_main{
    width: $main_w;
    margin: auto;
    padding: 30px 30px 0;
    font-size: 0;
    .buy_img{
        text-align: center;
        width: 50%;
        display: inline-block;
        .big_img{
            position: relative;
            height: 460px;
            >div{
                position: absolute;
                top: 0;
                left: 0;
                width: 58px;
                height: 33px;
                span{
                    font-size: 20px;
                    line-height: 32px;
                    color: white;
                    display: inline-block;
                    width: 50px;
                    height: 32px;
                    background: #ed5e2f;
                    text-align: center;
                }
                >div:first-of-type{
                    border-right: 7px solid transparent;
                    border-top: 16px solid #ed5e2f;
                    width: 0;
                    height: 0;
                    
                }
                >div:last-of-type{
                    border-right: 7px solid transparent;
                    border-bottom: 16px solid #ed5e2f;
                    width: 0;
                    height: 0;
                    
                }
            }
            li{
                width: 100%;
                text-align: center;
                display: inline-block;
                height: 100%;
                .demo{  
                    
                    width: 460px;  
                    height: 460px;
                    position: relative; 
                    margin: auto;
                    &:first-of-type{
                        display: block;
                    }
                    &:nth-of-type(2){
                        display: none;
                    }
                    &:nth-of-type(3){
                        display: none;
                    }
                    &:nth-of-type(4){
                        display: none;
                    }
                }  
                .float-box{  
                    display: none;  
                    width:160px;  
                    height: 160px;  
                    position: absolute;  
                    background: #ffffcc;  
                    border: 1px solid #CCCCCC;    
                    opacity: 0.5;  
                    cursor: move;  
                }  
                .big-box{  
                    display: none;      
                    position: absolute;  
                    top:0;  
                    left: 460px;  
                    width: 460px;  
                    height: 460px;  
                    overflow: hidden;  
                    border: 1px solid #CCCCCC;  
                    z-index: 2;  
                }  
                .big-box img{  
                    position: absolute;
                    top: 0;
                    left: 0;  
                    z-index: 5;  
                    width: 200%;
                }  
                .small-box{  
                    position: relative;  
                    z-index: 1;  
                    img{
                        width: 100%;
                    }
                }  
            }
        }
        .small{
            width: 80%;
            display: inline-block;
            position: relative;
            margin-top: 20px;
            .c_left{
                position: absolute;
                width: 14px;
                height: 24px;
                top: 40%;
                left: -30px;
                cursor: pointer;
                img{
                    width: 100%;
                }
            }
            .c_right{
                position: absolute;
                width: 14px;
                height: 24px;
                top: 40%;
                right: -30px;
                cursor: pointer;
                img{
                    width: 100%;
                }
            }
            li{
                width: 21%;
                text-align: center;
                display: inline-block;
                margin: 0 2%;
                 border: 2px solid transparent;
                div{
                    display: inline-block;
                    width: 80%;
                    cursor: pointer;
                   
                    img{
                        width: 100%;
                        
                    }
                }
            }
            
        }
    }
    .buy_choose{
        width: 50%;
        display: inline-block;
        padding-left: 25px;
        
        h2{
            font-size: 28px;
            text-align: left;
            font-weight: normal;
            line-height: 45px;
        }
        >p:first-of-type{
            font-size: 14px;
            color: #ff0000;
            text-align: left;
            margin-bottom: 26px;
        }
        .color{
            width: 100%;
            >span{
                display: inline-block;
                font-size: 16px;
                line-height: 42px;
                margin-right: 22px;
                vertical-align: top;
            }
            ul{
                display: inline-flex;
                width: 505px;
                flex-wrap: wrap;
                align-content: start;
                margin-bottom: 10px;
                li{
                    width: 150px;
                    height: 40px;
                    border: 1px solid #dddddd;
                    background: #ffffff;
                    margin: 7px;
                    text-align: center;
                    cursor: pointer;
                    i{
                        display:inline-block;
                        width: 20px;
                        height: 20px;
                        border-radius: 50%; 
                        background: #000000;
                        vertical-align: middle;
                        margin-right:10px;
                    }
                    span{
                        font-size: 16px;
                        line-height: 36px;
                        vertical-align: middle;
                    }
                    &:first-of-type{
                        border:$border_choose;
                    }
                    &:nth-of-type(2){
                        i{
                            background: #61506a;
                        }
                    }
                    &:nth-of-type(3){
                        i{
                            background: #859dcb;
                        }
                    }
                    &:nth-of-type(4){
                        position: relative;
                        div{
                            width: 100%;
                            height: 100%;
                            position: absolute;
                            top: 0;
                            left: 0;
                            background-color: #e8e8e8;
                            opacity: .6;
                            z-index: 1;
                        }
                        i{
                            background: #b39b7b;
                        }
                    }
                    &:nth-of-type(5){
                        i{
                            background: #ecb6c1;
                        }
                    }
                }
            }
        }
        .tf{
            width: 100%;
            >span{
                display: inline-block;
                font-size: 16px;
                line-height: 42px;
                margin-right: 22px;
                vertical-align: top;
            }
            ul{
                display: inline-flex;
                width: 505px;
                flex-wrap: wrap;
                align-content: start;
                margin-bottom: 10px;
                li{
                    width: 149px;
                    height: 55px;
                    border: 1px solid #dddddd;
                    background: #ffffff;
                    margin: 7px;
                    text-align: center;
                    cursor: pointer;
                    padding: 7px;
                    p{
                        font-size: 16px;
                        line-height: 20px;
                    }
                    &:first-of-type{
                        border: $border_choose;
                    }
                }
                
            }
        }
        .banben{
            width: 100%;
            >span{
                display: inline-block;
                font-size: 16px;
                line-height: 42px;
                margin-right: 22px;
                vertical-align: top;
            }
            ul{
                display: inline-flex;
                width: 505px;
                flex-wrap: wrap;
                align-content: start;
                margin-bottom: 10px;
                li{
                    width: 150px;
                    height: 40px;
                    border: 1px solid #dddddd;
                    background: #ffffff;
                    margin: 7px;
                    text-align: center;
                    cursor: pointer;
                    border: $border_choose;
                    p{
                        font-size: 16px;
                        line-height:36px;
                    }
                }
            }
        }
        .mach{
            width: 100%;
            >span{
                display: inline-block;
                font-size: 16px;
                line-height: 42px;
                margin-right: 22px;
                vertical-align: top;
            }
            >div{
                display: inline-block;
                width: 498px;
                height: 127px;
                background-color: #f8f8f8;
                margin-left: 7px;
                padding: 10px;
                >div:first-of-type{
                    width: 90%;
                    height: 67px;
                    margin: auto;
                    border-bottom: 1px solid white;
                    >span{
                        font-size: 16px;
                        font-weight: bold;
                        line-height: 24px;
                    }
                    span:last-of-type{
                        font-size: 30px;
                        font-weight: bold;
                    }
                    
                }
                >div:last-of-type{
                    width: 90%;
                    padding-top: 10px;
                    margin: auto;
                    >span{
                        display: inline-block;
                        color: #fa7236;
                        font-size: 12px;
                        border-radius: 2px;
                        border: 1px solid #fa7236;
                        text-align: center;
                    }
                    >i{
                        display: inline-block;
                        width: 6px;
                        height: 6px;
                        background: #a8a19e;
                        border-radius: 50%;
                        vertical-align: super;
                        margin-left: 20px;
                        
                    }
                    >p{
                        display: inline-block;
                        font-size: 12px;
                        line-height: 18px;
                        margin: 0 8px;
                        &:first-of-type{
                            color: #337ab7;
                        }
                    }
                }
            }
            
        }
        .addcar{
            display: inline-block;
            width: 280px;
            height: 50px;
            font-size: 22px;
            font-weight: bold;
            line-height: 48px;
            text-align: center;
            border: 1px solid #000000;
            border-radius:25px;
            margin: 25px 60px 30px;
            cursor: pointer;
            &:hover{
                color: white;
                background: black;
            }
        }
        
        
        
    }
}
.taozhuang{
    width: 100%;
    background: #e1e3e5;
    >div{
        width: 1231px;
        height: 80px;
        padding-left:3%;
        span{
            width: 250px;
            display: inline-block;
            height: 80px;
            font-size: 22px;
            line-height: 80px;
            text-align: center;
            cursor: pointer;
            &:first-of-type{
                border-bottom:3px solid $hover_color;
                color: $hover_color;
                font-weight: bold;
            }
        }
    }
    >ul{
        width: 100%;
        height: 378px;
        background: #ffffff;
        padding-top: 10px;
        overflow: hidden;
        >li{
            width: $main_w;
            margin: auto;
            height: 368px;
            >div:first-of-type{
                text-align: center;
                width: 250px;
                >div{
                    display: inline-block;
                    width: 75%;
                    img{
                        width: 100%;
                    }
                }
                h3{
                    font-size: 13px;
                    display: inline-block;
                    width: 75%;
                    text-align: left;
                    margin-bottom: 20px;
                }
                p{
                    font-size: 13px;
                    display: inline-block;
                    width: 75%;
                    text-align: left;
                }
                span{
                    font-size: 13px;
                    display: inline-block;
                    width: 75%;
                    text-align: left;
                }
            }
            >div:nth-of-type(2){
                text-align: center;
                width: 250px;
                >div{
                    display: inline-block;
                    width: 75%;
                    img{
                        width: 100%;
                    }
                }
                h3{
                    font-size: 13px;
                    display: inline-block;
                    width: 75%;
                    text-align: left;
                    margin-bottom: 20px;
                    font-weight: normal;
                }
                span{
                    font-size: 13px;
                    display: block;
                    width: 75%;
                    text-align: left;
                    margin: auto;
                }
                select{
                    width: 75%;
                    display: block;
                    margin: auto;
                    height: 28px;
                    border: 1px solid #e5e5e5;
                }
            }
            >div:nth-of-type(3){
                height: 348px;
                width: 348px;
                text-align: center;
                padding-top: 150px;
                >span:first-of-type{
                    font-size: 15px;
                    display: inline-block;
                    vertical-align: middle;
                }
                >span:last-of-type{
                    font-size: 27px;
                    color: #e0190f;
                    font-weight: bold;
                    display: inline-block;
                    vertical-align: middle;
                    margin-left: 5px;
                }
                del{
                    font-size: 20px;
                    color: #999999;
                    margin-left: 75px;
                    line-height: 22px;
                    font-weight: bold;
                }
                a{
                    display: block;
                    width: 190px;
                    height: 48px;
                    border: 1px solid black;
                    border-radius: 23px;
                    color: black;
                    line-height: 46px;
                    margin: auto;
                    margin-top: 9px;
                }
                
            }
            >div:nth-of-type(4){
                height: 348px;
                width: 20px;
            }
        }
    }
}
.details{
    width: 100%;
    background:#e1e3e5 ;
    font-size: 0;
    >div:first-of-type{
        width:1500px;
        height: 80px;
        
        span{
            font-size: 23px;
            font-weight: bold;
            line-height: 80px;
            margin: 0 100px 0 50px;
        }
        a{
            display: inline-block;
            width: 180px;
            font-size: 20px;
            color: black;
            line-height: 74px;
            text-align: center;
            &:first-of-type{
                @include clickcss;
            }
        }
            
    }
    .pic1{
        width: 100%;
        >img{
            width: 100%;
        }   
    }
    >div:nth-of-type(6){
        width: 100%;
        background: black;
        padding: 0 10%;
        position: relative;
        height: 800px;
        >div{
            padding-top: 80px;
            width: 760px;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            text-align: center;
            >div{
                display: inline-block;
                width: 65%;
                img{
                    width: 100%;
                }
            }
            h2{
                margin:20px 0 20px 0;
                color: white;
                font-size: 21px;
            }
            h3{
                color: white;
                font-size:55px;
                line-height: 62px;
            }
            p{
                margin-top: 20px;
                font-size: 18px;
                color: white;
                letter-spacing: -1px;
            }
            
        }
    }
    >div:nth-of-type(8){
        width: 100%;
        height: 760px;
        background: url(../buyimg/detail7.jpg);
        background-size: 100% 100%;
        position: relative;
        >div:first-of-type{
            position: absolute;
            bottom: 0;
            left: 20%;
        }
        >div:last-of-type{
            width: 500px;
            padding-top: 200px;
            margin-left: 55%;
            h2{
                line-height: 50px;
                font-size: 23px;
            }
            h3{
                font-size: 60px;
                line-height: 68px;
            }
            p{
                font-size: 20px;
                margin: 30px 0;
            }
            span{
                font-size: 16px;
                line-height: 50px;
            }
        }
    }
    >div:nth-of-type(10){
        position: relative;
        height: 800px;
        >img{
            height: 100%;
        }
        >div{
            width: 800px;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            text-align: center;
            h2{
                line-height: 50px;
                font-size: 23px;
                color: white;
                text-align: center;
            }
            h3{
                font-size: 60px;
                line-height: 68px;
                color: white;
                text-align: center;
            }
            p{
                font-size: 20px;
                margin: 30px 0;
                color: white;
                text-align: center;
            }
            >div:first-of-type{
                position: absolute;
                bottom: 120px;
                left: -5px;
            }
            >div:last-of-type{
                display: inline-block;
                margin: auto;
                width: 70%;
                margin-top: 50px;
                img{
                    width: 100%;
                }
            }
        }
    }
    
}
.ggcs{
    width: 100%;
    padding-top: 60px;
    h2{
        font-size: 32px;
        color: #333;
        font-weight: normal;
        text-align: center;
        margin-bottom: 20px;
    }
    >ul:first-of-type{
        width: 100%;
        height: 112px;
        display: flex;
        border-top:1px solid #d0d0d0 ;
        
        li:first-of-type{
            width: 25%;
            padding-top: 30px;
            padding-left: 30px;
            p{
                font-size: 17px;
                color: #0071c5;
            }
        }
        li:nth-of-type(2){
            width: 25%;
            padding-top: 30px;
            padding-left: 30px;
            p{
                font-size: 14px;
                font-weight: bold;
            }
            span{
                font-size: 12px;
            }
        }
        li:nth-of-type(3){
            width: 25%;
            padding-top: 30px;
            padding-left: 30px;
            p{
                font-size: 14px;
                font-weight: bold;
            }
            span{
                font-size: 13px;
            }
        }
    }
    >ul:last-of-type{
        width: 100%;
        height: 194px;
        display: flex;
        border-top:1px solid #d0d0d0 ;
        li:first-of-type{
            width: 25%;
            padding-top: 30px;
            padding-left: 30px;
            p{
                font-size: 17px;
                color: #0071c5;
            }
        }
        li:nth-of-type(2){
            width: 25%;
            padding-top: 30px;
            padding-left: 30px;
            p{
                font-size: 14px;
                font-weight: bold;
            }
            span{
                font-size: 12px;
            }
        }
        li:nth-of-type(3){
            width: 25%;
            padding-top: 30px;
            padding-left: 30px;
            p{
                font-size: 14px;
                font-weight: bold;
            }
            span{
                font-size: 13px;
            }
        }
        li:nth-of-type(4){
            width: 25%;
            padding-top: 30px;
            padding-left: 30px;
            p{
                font-size: 14px;
                font-weight: bold;
            }
            span{
                font-size: 13px;
                display: inline-block;
                margin-bottom: 50px;
            }
        }
    }
    >div{
        width: 100%;
        background: #f9f9f9;
        cursor: pointer;
        span{
            font-size: 17px;
            line-height: 81px;
            display: inline-block;
            vertical-align: middle;
            margin-left: 30px;
            margin-right: 10px;
        }
        i{
            display: inline-block;
            width: 14px;
            height: 14px;
            vertical-align: sub;
        }
    }
    >p{
        display: block;
        width: 100%;
        line-height: 58px;
        background: #f1f2f4;
        padding-left: 30px;
        font-size: 13px;
    }
}
.xgtj{
    width: 100%;
    h2{
        font-size: 32px;
        color: #333;
        text-align: center;
        font-weight: normal;
        margin-top: 68px;
    }
    >ul{
                width:1171px;
                height: 342px;
                font-size: 0;
                margin-top: 31px;
                margin: auto;
                li{
                    width: 283px;
                    height: 342px;
                    vertical-align: top;
                    display: inline-block;
                    background-color: white;
                    margin-right: 13px;
                    margin-bottom: 4px;
                    div{
                        width: 217px;
                        height: 217px;
                        margin:15px auto;
                        a{
                            display: inline-block;
                            width: 217px;
                            height: 217px;
                        }
                        img{
                            width: 100%;
                        }
                    }
                    p:first-of-type{
                        
                        text-align: center;
                        margin-left: 5%;
                        margin-right: 5%;
                        a{
                            font-size: 17px;
                            color: #333333;
                            &:hover{
                                color:#006ec5;
                            }
                        }
                    }
                    P:nth-of-type(2){
                        font-size: 16px;
                        color: #333333;
                        text-align: center;
                        margin:1px 5%;
                        del{
                            font-size: 19px;
                            color: #cbcdd5;
                        }
                    }
                }
                li:last-of-type{
                    margin-right: 0;
                }
            }
}
